<template>
  <div class="classify">
    <el-row :gutter="20">
      <el-col :span="20">
        <p>医院</p>
        <div class="grade">
          <span>等级:</span>
          <ul>
            <li :class="{ 'active': activeFlag === '' }" @click="changeLevel('')">全部</li>
            <li :class="{ 'active': activeFlag === item.value }" v-for="item in hospLevelInfo" :key="item.name" @click="changeLevel(item.value)">{{ item.name }}</li>
          </ul>
        </div>
        <div class="area">
          <span>地区:</span>
          <ul>
            <li :class="{ active: regionFlag === '' }" @click="changeRegion('')">全部</li>
            <li :class="{ active: regionFlag === item.id.toString() }" v-for="item in hospRegionInfo" :key="item.name" @click="changeRegion(item.id.toString())">{{ item.name }}</li>
          </ul>
        </div>
        <!-- 卡片组件 -->
        <Card />
          <!-- 分页器 -->
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Card from '@/views/home/components/card/index.vue'
import Tip from '@/views/home/components/tip/index.vue'
import { reqHospitalLevelAndRegion } from '@/api/home'
import type { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/api/home/type'

import { ref, onMounted, inject } from 'vue'

const props = defineProps({
  getHospitalInfo: Function
})

const emit = defineEmits(['propLevelAndRegion'])

const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(inject('total'))
const level = ref('')
const region = ref('')
// 高亮标识
const activeFlag = ref('')
const regionFlag = ref('')

// 获取医院等级和地区数据
const hospLevelInfo = ref<HospitalLevelAndRegionArr>([])
const hospRegionInfo = ref<HospitalLevelAndRegionArr>([])

onMounted(() => {
  getHospLevel()
  getHospRegion()
})

// 获取等级数据方法
const getHospLevel = async () => {
  try {
    const res: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('HosType')
    hospLevelInfo.value = res.data
  } catch (error) {
    console.log(error)
  }
}

// 获取地区数据方法
const getHospRegion = async () => {
  try {
    const res: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('Beijin')
    hospRegionInfo.value = res.data
  } catch (error) {
    console.log(error)
  }
}

// 高亮当前选择的等级
const changeLevel = (index: string) => {
  activeFlag.value = index
  level.value = index
  emitLevelAndRegion()
}

// 高亮当前选择的地区
const changeRegion = (id: string) => {
  regionFlag.value = id
  region.value = id
  emitLevelAndRegion()
}

// 向父组件传递等级和地区数据
const emitLevelAndRegion = () => {
  emit('propLevelAndRegion', { level: level.value, region: region.value })
}

// 监听当前页码变化
const handleCurrentChange = async (value: number) => {
  // 非空断言，要不然会显示 ‘不能调用可能是“未定义”的对象’
  props.getHospitalInfo!(value, pageSize.value, level.value, region.value)
}
// 监听每页显示数量变化
const handleSizeChange = (value: number) => {
  props.getHospitalInfo!(pageNum.value, value, level.value, region.value)
}

</script>

<style lang="scss" scoped>
.classify {
  color: #7f7f7f;
  .grade, .area {
    display: flex;
    margin-top: 25px;
    span {
      width: 50px;
    }
    ul {
      display: flex;
      &:hover {
        cursor: pointer;
      }
      li {
        margin-right: 10px;
        &.active {
          color: #23a8f2;
        }
        &:hover {
          color: #23a8f2;
        }
      }
    }
  }
  .area ul {
    flex-wrap: wrap;
    margin-left: 3px;
    li {
      margin-bottom: 10px;
    }
  }
  .el-pagination {
    justify-content: center;
    height: 80px;
  }
}

</style>
